<template>
  <div>
    <h1>租车用户评价列表</h1>
    <!-- 查询 -->
    <el-select v-model="value" placeholder="请选择查询条件">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <!-- 列表 -->
    <el-button @click="show(value)">查询</el-button>
    <el-table :data="rentData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="status" label="评论" width="180">
        <div slot-scope="props" v-if="props.row.status == 0">差评</div>
        <div slot-scope="props" v-else-if="props.row.status == 1">未评论</div>
        <div v-else>好评</div>
      </el-table-column>
      <el-table-column prop="userId.userName" label="姓名" width="180"></el-table-column>
      <el-table-column label="评论内容">
        <div slot-scope="props" v-if="props.row.status == 1">该用户未评论</div>
        <div slot-scope="props" v-else>{{props.row.comments}}</div>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination background layout="prev, pager, next" :total="100"></el-pagination> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      rentData: [],
      options: [
        {
          value: "0",
          label: "差评"
        },
        {
          value: "1",
          label: "未评论"
        },
        {
          value: "2",
          label: "好评"
        },
        {
          value: "",
          label: "全部"
        }
      ],
      value: "",
      currentPage: 1,
      pageSize: 2
    };
  },
  mounted() {
    // const status = this.value;
    // axios.get("/comments/getRent", { params: { status } }).then(res => {
    //   this.rentData = res.data;
    // });
    this.show("");
  },
  computed: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row === 1) {
        return "warning-row";
        console.log(row);
      } else if (row === 3) {
        return "success-row";
      }
      return "";
    },
    valueChange() {
      console.log(this.value);
    },
    show(status) {
      axios
        .get("/comments/getRent", { params: { status } })
        .then(res => {
          console.log(res.data);
          this.rentData = res.data;
        });
    }
  }
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>